var Event = require("bcore/event");
var $ = require("jquery");
var _ = require("lodash");
//var Chart = require('XXX');
import "echarts-gl";
var Echarts = require("echarts");
var shanxi = require("./china.json");

/**
 * 马良基础类
 */
module.exports = Event.extend(
  function Base(container, config) {
    this.config = {
      theme: {},
    };
    this.container = $(container); //容器
    this.apis = config.apis; //hook一定要有
    this._data = null; //数据
    this.chart = null; //图表
    this.init(config);
  },
  {
    /**
     * 公有初始化
     */
    init: function (config) {
      //1.初始化,合并配置
      this.mergeConfig(config);
      //2.刷新布局,针对有子组件的组件 可有可无
      this.updateLayout();
      //3.子组件实例化
      this.chart = Echarts.init(this.container[0]);
      //this.chart = new Chart(this.container[0], this.config);
      //4.如果有需要, 更新样式
      this.updateStyle();
    },
    /**
     * 绘制
     * @param data
     * @param options 不一定有
     * !!注意: 第二个参数支持config, 就不需要updateOptions这个方法了
     */
    render: function (data, config) {
      console.log(data, "data");
      data = this.data(data);
      var cfg = this.mergeConfig(config);
      let spotArr = data[0].spot.slice();

      // 散点数据
      spotArr.forEach((item) => {
        item.name = "";
        item.value[3] = item.value[2] + 1000;
        item.value[2] = cfg.zHeight;
      });

      // 柱形数据
      let columnArr = data[0].column.slice();
      columnArr.forEach((item) => {
        item.name = "";
        // item.visualMap = false;
        item.value[2] = 1000000 + item.value[2];
        console.log(item);
      });

      // 防止散点图塌陷
      columnArr.push({
        value: [0, 0, 10],
      });

      const that = this;
      var uploadedDataURL = "./shanxi.json";
      this.chart.showLoading();
      // $.getJSON(uploadedDataURL, function (geoJson) {
      // 注册地图名字(tongren)和数据(geoJson)
      Echarts.registerMap("tongren", shanxi);

      // 隐藏动画加载效果。
      that.chart.hideLoading();
      console.log(cfg, "cfg");
      // 图表配置项
      var option = {
        visualMap: [
          {
            show: false,
            // 第一个 visualMap 组件
            type: "continuous", // 定义为连续型 visualMap
            text: ["scatter3D"],
            dimension: 3,
            seriesIndex: 2,
            max: 1200,
            min: 1000,
            inRange: {
              symbol: "circle",
              symbolSize: [cfg.spotSize.sectionMin, cfg.spotSize.sectionMax],
              color: "#FFD644",
              colorLightness: [0.2, 0.6],
              opacity: 1,
            },
          },
          {
            show: false,
            // 第一个 visualMap 组件
            type: "continuous", // 定义为连续型 visualMap
            text: ["bar3D"],
            dimension: 2,
            seriesIndex: 1,
            max: 1000200,
            min: 1000000,
            inRange: {
              symbolSize: [5, 15],
              colorLightness: [0.3, 0.5],
              color: "#36F6FF",
              opacity: 1,
            },
          },
        ],
        geo3D: {
          map: "tongren", // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同。
          regionHeight: 3.1, // 地图厚度
          boxWidth: cfg.mapWidth,
          boxHeight: 10,
          viewControl: {
            projection: "perspective",
            rotateSensitivity: 1,
            distance: 0,
            alpha: 50,
            beta: 10,
            animation: true,
            center: [cfg.center1, cfg.center2, cfg.center3],
          },
          itemStyle: {
            color: "#02323D",
            opacity: 1, // 透明度
            borderColor: "#36F6FF", // 分界线颜色
            borderWidth: 2,
          },
          emphasis: {
            // 鼠标 hover 高亮时图形和标签的样式。
            label: {
              show: true, // 是否显示标签
              textStyle: {
                color: "#999999", // 高亮文字颜色
                fontSize: 12,
                fontFamily: "微软雅黑",
              },
            },
          },
        },
        series: [
         
          {
            name: "map3D",
            type: "map3D",
            map: "tongren",
            regionHeight: 3.0,
            boxWidth: cfg.mapWidth + 0.2,
            boxHeight: 10.05,
            itemStyle: {
              color: "#36F6FF",
              opacity: 1, // 透明度
            },
            light: {
              main: {
                color: "#FFFFFF",
                intensity: 0.8,
                shadow: false,
                alpha: 1,
                beta: 5,
              },
              ambient: {
                color: "#FFFFFF",
                intensity: 0.4,
              },
              ambientCubemap: {
                diffuseIntensity: 0.5,
              },
            },
            viewControl: {
              projection: "perspective",
              rotateSensitivity: 0,
              distance: 0,
              alpha: 50,
              beta: 10,
              animation: true,
              center: [cfg.center1, cfg.center2, cfg.center3],
            },
          },
          {
            name: "bar3D",
            type: "bar3D",
            coordinateSystem: "geo3D", // 该系列使用的坐标系
            // symbol:
            //   "path://M3 133.715V1H11V133.715C12.2275 134.301 13 135.152 13 136.1C13 137.867 10.3137 139.3 7 139.3C3.68629 139.3 1 137.867 1 136.1C1 135.152 1.7725 134.301 3 133.715ZM3 134.617C2.11885 135.122 1.8 135.676 1.8 136.1C1.8 136.544 2.15091 137.133 3.13383 137.657C4.08237 138.163 5.44788 138.5 7 138.5C8.55212 138.5 9.91763 138.163 10.8662 137.657C11.8491 137.133 12.2 136.544 12.2 136.1C12.2 135.676 11.8812 135.122 11 134.617V135.327C11 136.417 9.20913 137.3 7 137.3C4.79087 137.3 3 136.417 3 135.327V134.617Z",
            // symbolSize: [10, 40],
            opacity: 1,
            barSize: cfg.bar3DSize, //柱子粗细
            bevelSize: 0,
            shading: "lambert",
            bevelSize: 0.3,
            label: {
              show: true,
              formatter: "{b}",
            },
            itemStyle: {
              // color: "#36F6FF",
              // opacity: 1,
            },
            data: columnArr,
            animation: true,
            animationDurationUpdate: 500,
            animationEasingUpdate: "cubicOut",
          },
          {
            name: "scatter3D",
            type: "scatter3D",
            coordinateSystem: "geo3D", // 该系列使用的坐标系
            // symbol: "circle",
            minHeight: 3.1,
            itemStyle: {
              // color: "#FFD644",
            },
            opacity: 1,
            label: {
              show: true,
              formatter: "{b}",
            },
            data: spotArr,
          },
          {
            type: "lines3D",
            coordinateSystem: "geo3D",
            geo3DIndex: 0,
            polyline: false,
            // 飞线的尾迹特效
            effect: {
              show: true,
              period: 2, // 尾迹特效的周期。
              trailWidth: cfg.flyingLine.markWidth, // 尾迹的宽度。
              trailLength: cfg.flyingLine.markLength, // 尾迹的长度，范围从 0 到 1，为线条长度的百分比。
              symbolSize: 5,
              trailColor: cfg.flyingLine.markColor // 尾迹的颜色
            },
            // 飞线样式
            itemStyle: {
              normal: {
                lineStyle: {
                  color: cfg.flyingLine.lineColor,
                  width: cfg.flyingLine.lineWidth,
                  opacity: 1,
                  curveness: 0.2,
                },
              },
            },
            data: [
              {
                coords: data[0].lineDate,
              },
            ],
          },
        ],
      };
      // 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。
      that.chart.setOption(option);
      // });

      //如果有需要的话,更新样式
      this.updateStyle();
    },
    /**
     *
     * @param width
     * @param height
     */
    resize: function (width, height) {
      this.updateLayout(width, height);
      this.chart.resize({ width, height });
      //更新图表
      //this.chart.render({
      //  width: width,
      //  height: height
      //})
    },
    convertData: function (geoCoordMap, data) {
      console.log(data);
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: "",
            value: geoCoord.concat(Number(data[i].value)),
          });
        }
      }
      console.log(res, "res");
      return res;
    },
    /**
     * 每个组件根据自身需要,从主题中获取颜色 覆盖到自身配置的颜色中.
     * 暂时可以不填内容
     */
    setColors: function () {
      //比如
      //var cfg = this.config;
      //cfg.color = cfg.theme.series[0] || cfg.color;
    },
    /**
     * 数据,设置和获取数据
     * @param data
     * @returns {*|number}
     */
    data: function (data) {
      if (data) {
        this._data = data;
      }
      return this._data;
    },
    /**
     * 更新配置
     * 优先级: config.colors > config.theme > this.config.theme > this.config.colors
     * [注] 有数组的配置一定要替换
     * @param config
     * @private
     */
    mergeConfig: function (config) {
      if (!config) {
        return this.config;
      }
      this.config.theme = _.defaultsDeep(config.theme || {}, this.config.theme);
      this.setColors();
      this.config = _.defaultsDeep(config || {}, this.config);
      return this.config;
    },
    /**
     * 更新布局
     * 可有可无
     */
    updateLayout: function () {},
    /**
     * 更新样式
     * 有些子组件控制不到的,但是需要控制改变的,在这里实现
     */
    updateStyle: function () {
      var cfg = this.config;
      this.container.css({
        "font-size": cfg.size + "px",
        color: cfg.color || "#fff",
      });
    },
    /**
     * 更新配置
     * !!注意:如果render支持第二个参数options, 那updateOptions不是必须的
     */
    //updateOptions: function (options) {},
    /**
     * 更新某些配置
     * 给可以增量更新配置的组件用
     */
    //updateXXX: function () {},
    /**
     * 销毁组件
     */
    destroy: function () {
      console.log("请实现 destroy 方法");
    },
  }
);
